<template>
  <div class="login" ref="div">
    <!--topnav-->
    <top-nav :curpages="3"></top-nav>

    <div class="com-middle">
      <!--<img src="../../assets/product/pro-bg.jpg" alt="" class="comm-bg">-->
      <div class="comm-content">
        <h3>我的投资</h3>
        <div class="commc-nav">
          <div class="comn-shouyi comn-com" :class="{active:curActive == 1}" @click="typeOne">
            全部
          </div>
          <div class="comn-huidi comn-com" :class="{active:curActive == 2}" @click="typeTwo">
            已认购
          </div>
          <div class="comn-guquan comn-com" :class="{active:curActive == 3}" @click="typeThree">
            已回购
          </div>
        </div>

        <div class="com-out clear">
          <div class="com-detail">
            <div class="com-map" v-for="invest in investList" @click="addLocalStorage(invest.car.imei)">
              <router-link :to="{ name: 'baseInfo', params: { productId: invest.id }}"
                           >
                <div class="mod-left">

                </div>
                <div class="mod-right">
                  <div class="modr-big">
                    <!--单季赢-->
                    {{invest.productId ? invest.productId.name : ''}}
                  </div>
                  <div class="modr-details">
                    <div class="modrd-one">
                      <!--<span>起购金额:<i>{{invest.productId.investNum > 10000 ? (invest.productId.investNum / 10000) : invest.investNum}}{{invest.investNum-->
                      <!--&gt; 10000 ? "万元" : "元"}}</i></span>-->
                      <span>投资金额:<i>{{invest.productId.startUpNum}}万元</i></span>
                      <span>投资周期:<i>{{invest.productId.period}}个月</i></span>
                    </div>
                    <div class="modrd-two">
                      年化收益率：{{invest.productId.rate}}
                    </div>
                    <div class="modrd-three">
                      收益方式：{{invest.productId.incomeMethod}}
                    </div>
                  </div>
                  <a class="see-details">

                  </a>
                </div>
                <div class="brand">
                  <!--<img src="../../assets/investment/has-get.png" alt="">-->
                  <img src="../../assets/investment/has-get.png" alt="" v-if="invest.investStatus == 'SUBSCRIBED'">
                  <img src="../../assets/investment/huigou.png" alt=""
                       v-if="invest.investStatus == 'DEPOSITED' || invest.investStatus == 'PRE_DEPOSIT'">
                </div>
              </router-link>
            </div>
            <mo-paging
              :total="count"
              :page-size="pageSize"
              @change="pageChange">
            </mo-paging>
          </div>
        </div>


      </div>

    </div>

    <bottom></bottom>

  </div>
</template>

<script>
  import topNav from '@/components/topNav/topnav'
  import bottom from '@/components/bottom/bottom'
  import {mapActions} from 'vuex'
  import api from '@/utils/api'
  import MoPaging from '@/components/paginate/paginate'

  export default {
    components: {
      topNav,
      bottom,
      MoPaging
    },
    data() {
      return {
        curActive: 1,
        investList: [],//产品列表
        pageSize: 4, //每页显示20条数据
        count: 0, //总记录数
      }
    },
    computed: {},
    methods: {
      typeOne: function () {
        this.curActive = 1;
        this.init("0", 0);
      },
      typeTwo: function () {
        this.curActive = 2;
        this.init("1", 0);
      },
      typeThree: function () {
        this.curActive = 3;
        this.init("2", 0);
      },
      addLocalStorage: function (imei) {
        alert(imei)
        localStorage.setItem("imei", imei);
      },
      init(type, curpage) {
        this.$store.dispatch('Get', {
          url: api.custInvestList,
          data: {
            customer: localStorage.getItem("userinfo"),
            type: type,
            page: curpage,
            size: this.pageSize
          }
        }).then((res) => {
          this.count = res.data.totalElements;
          this.investList = res.data.content;
        })
      },
      //从page组件传递过来的当前page
      pageChange(page) {
        this.currentPage = page;
        switch (this.curActive) {
          case 1 :
            this.init("0", page - 1)
            break;
          case 2:
            this.init("2", page - 1)
            break;
          case 3:
            this.init("3", page - 1)
            break
        }

      }
    },
    mounted() {
      this.init("0", 0)
    }
  }
</script>
<style scoped lang="scss">

  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 42px;
        line-height: 65px;
        margin-top: 110px;
      }
      .commc-nav {
        width: 100%;
        height: 75px;
        background-color: #ffffff;
        margin-top: 70px;
        position: relative;
        .comn-com {
          width: 240px;
          height: 91px;
          position: absolute;
          bottom: 0;
          z-index: 99;
          color: #000000;
          text-align: center;
          line-height: 105px;
          font-size: 28px;
          cursor: pointer;
          &.active {
            background: url(../../assets/product/top.png) center no-repeat;
            color: #ffffff;
          }
        }
        .comn-shouyi {
          left: 108px;
        }
        .comn-huidi {
          left: 490px;
        }
        .comn-guquan {
          left: 790px;
        }

      }

      .com-out {
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        overflow: hidden;
        margin-top: 50px;
      }
      .com-detail {
        width: 996px;
        margin: 50px auto 0;

        .com-map {
          width: 100%;
          height: 200px;
          float: left;
          margin-bottom: 40px;
          margin-top: 40px;
          position: relative;
          .mod-left {
            width: 200px;
            height: 200px;
            float: left;
            background: url(../../assets/investment/mod-left.png) center no-repeat;
            background-size: cover;
            .ml-title {
              width: 100%;
              color: #ffffff;
              font-size: 24px;
              text-align: center;
              margin: 30px 0 10px;
            }
            .ml-rate {
              width: 175px;
              color: #ffffff;
              font-size: 32px;
              text-align: center;
              margin: 10px auto;
              padding: 8px 0;
              border-top: 5px solid #ffffff;
              border-bottom: 4px solid #ffffff;
              font-family: "Hannotate SC", Yuanti SC, YouYuan, Wawati SC, NSimSun;
              font-weight: 600;
              position: relative;
              img {
                display: block;
                position: absolute;
                bottom: -19px;
                left: 50%;
                margin-left: -11px;
              }
            }
          }
          .mod-right {
            width: 796px;
            height: 200px;
            float: left;
            position: relative;
            background: url(../../assets/investment/mod-right.png) left center no-repeat;
            .modr-big {
              width: 298px;
              line-height: 200px;
              font-weight: 800;
              font-size: 40px;
              font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
              color: #ffffff;
              float: left;
            }
            .modr-details {
              width: 400px;
              float: left;
              margin: 40px 0 0 30px;
              .modrd-one {
                width: 100%;
                margin-bottom: 12px;
                text-align: left;
                span {
                  font-size: 20px;
                  color: #ffffff;
                  margin-right: 50px;
                  i {
                    color: #ff6430;
                    font-style: inherit;
                  }
                }

              }
              .modrd-two {
                width: 100%;
                text-align: left;
                font-size: 20px;
                color: #ffffff;
                margin-bottom: 12px;
              }
              .modrd-three {
                width: 100%;
                text-align: left;
                font-size: 20px;
                color: #ffffff;
              }
            }
            .see-details {
              width: 150px;
              height: 40px;
              position: absolute;
              bottom: 20px;
              right: 50px;
              background: url(../../assets/product/see-detail.png) center no-repeat;
            }
          }
          .brand {
            width: 167px;
            height: 133px;
            position: absolute;
            top: 20px;
            right: -90px;
          }

        }
      }

    }
  }

  @media (max-width: 1400px) {
    .com-middle {
      width: 100%;
      min-width: 1210px;
      background: url(../../assets/product/pro-bg.jpg) center no-repeat;
      background-size: cover;
      position: relative;
      .comm-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        h3 {
          width: 100%;
          height: 65px;
          background: url(../../assets/product/line.png) center no-repeat;
          background-size: 1200px 4px;
          text-align: center;
          color: #ffffff;
          font-size: 36px;
          line-height: 65px;
          margin-top: 110px;
        }
        .commc-nav {
          width: 100%;
          height: 60px;
          background-color: #ffffff;
          margin-top: 70px;
          position: relative;
          .comn-com {
            width: 240px;
            height: 72px;
            position: absolute;
            bottom: 0;
            z-index: 99;
            color: #000000;
            text-align: center;
            line-height: 86px;
            font-size: 22px;
            cursor: pointer;
            &.active {
              background: url(../../assets/product/top.png) center no-repeat;
              background-size: 100% 100%;
              color: #ffffff;
            }
          }
          .comn-shouyi {
            left: 108px;
          }
          .comn-huidi {
            left: 490px;
          }
          .comn-guquan {
            left: 790px;
          }

        }

        .com-out {
          width: 100%;
          background: rgba(255, 255, 255, 0.7);
          overflow: hidden;
          margin-top: 50px;
        }
        .com-detail {
          width: 860px;
          margin: 50px auto 0;

          .com-map {
            width: 100%;
            height: 160px;
            float: left;
            margin-bottom: 40px;
            margin-top: 40px;
            position: relative;
            .mod-left {
              width: 160px;
              height: 160px;
              float: left;
              background: url(../../assets/investment/mod-left.png) center no-repeat;
              background-size: cover;
              .ml-title {
                width: 100%;
                color: #ffffff;
                font-size: 24px;
                text-align: center;
                margin: 30px 0 10px;
              }
              .ml-rate {
                width: 175px;
                color: #ffffff;
                font-size: 28px;
                text-align: center;
                margin: 10px auto;
                padding: 8px 0;
                border-top: 5px solid #ffffff;
                border-bottom: 4px solid #ffffff;
                font-family: "Hannotate SC", Yuanti SC, YouYuan, Wawati SC, NSimSun;
                font-weight: 600;
                position: relative;
                img {
                  display: block;
                  position: absolute;
                  bottom: -19px;
                  left: 50%;
                  margin-left: -11px;
                }
              }
            }
            .mod-right {
              width: 700px;
              height: 160px;
              float: left;
              position: relative;
              background: url(../../assets/investment/mod-right.png) left center no-repeat;
              .modr-big {
                width: 260px;
                height: 160px;
                overflow: hidden;
                line-height: 160px;
                font-weight: 800;
                font-size: 34px;
                font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
                color: #ffffff;
                float: left;
              }
              .modr-details {
                width: 400px;
                float: left;
                margin: 30px 0 0 30px;
                .modrd-one {
                  width: 100%;
                  margin-bottom: 12px;
                  text-align: left;
                  span {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 50px;
                    i {
                      color: #ff6430;
                      font-style: inherit;
                    }
                  }

                }
                .modrd-two {
                  width: 100%;
                  text-align: left;
                  font-size: 16px;
                  color: #ffffff;
                  margin-bottom: 12px;
                }
                .modrd-three {
                  width: 100%;
                  text-align: left;
                  font-size: 16px;
                  color: #ffffff;
                }
              }
              .see-details {
                width: 130px;
                height: 32px;
                position: absolute;
                bottom: 20px;
                right: 50px;
                background: url(../../assets/product/see-detail.png) center no-repeat;
                background-size: 100% 100%;
              }
            }
            .brand {
              width: 140px;
              height: 112px;
              position: absolute;
              top: 25px;
              right: -90px;
              img {
                width: 100%;
                height: 100%;
              }
            }

          }
        }

      }
    }
  }

</style>
